<!DOCTYPE html>
<html
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layout}">

<head>
    <title>Clusters</title>
</head>

<body>
<section layout:fragment="content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-align-justify"></i>
                        Kafka Clusters
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                            <tr>
                                <th>Cluster</th>
                                <th>Views</th>
                                <th>SSL</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="cluster : ${clusterList}">
                                <td>
                                    <a th:href="'/cluster/' + ${cluster.id}" th:text="${cluster.name}"></a>
                                </td>
                                <td>
                                    <a th:href="'/view?clusterId=' + ${cluster.id}" th:text="${viewsByClusterId.get(cluster.getId())} + ' Views'"></a>
                                </td>
                                <td>
                                    <span
                                        th:if="${cluster.isSslEnabled()}"
                                        class="badge badge-success">Yes
                                    </span>
                                    <span
                                        th:if="!${cluster.isSslEnabled()}"
                                        class="badge badge-danger">No
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--/.col-->
        </div>
    </div>
</section>

</body>
</html>